<template>
    <div class="app-container">
        <!-- 基础信息 -->
        <h5 class="titleInfo">
            添加管理员
        </h5>
        <el-form class="form" :model="form" :rules="rules" ref="forms" label-width="130px">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="姓名" prop="realName">
                        <el-input v-model="form.realName"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="form.username"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="form.password"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="手机号">
                        <el-input v-model="form.phone"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="邮箱">
                        <el-input v-model="form.email"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-col :span="24">
                <el-form-item label="部门" prop="deptId">
                    <el-select placeholder="请选择" v-model="form.deptId">
                        <el-option
                            v-for="item in dtoOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="角色" prop="roleIds">
                    <el-select
                        v-model="form.roleIds"
                        multiple
                        filterable
                        allow-create
                        default-first-option
                        placeholder="请选择">
                        <el-option
                        v-for="item in roleOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <!-- <el-row>
                <el-col :span="24">
                    <el-form-item label="权限">
                        <el-input></el-input>
                    </el-form-item>
                </el-col>
            </el-row> -->
            <el-col :span="24">
                <el-form-item>
                    <el-button style="margin-top:30px" type="primary" @click="submitFn('forms')" >立即提交</el-button>
                </el-form-item>
            </el-col>
        </el-form>
    </div>
</template>
<script>
import { saveAdminUser,listAdminDeptDTO,listAdminRoleDTO} from '@/api/adminManage'
export default {
    name:"adminManageAdd",
    data(){
        return {
            roleOptions:[],
            form:{
                realName:"",
                username:"",
                password:"",
                phone:"",
                email:"",
                deptId:"",
                roleIds:[],
            },
            dtoOptions:[],
            rules: {
                realName: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                ],
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],
                deptId: [
                    { required: true, message: '请选择部门', trigger: 'blur' },
                ],
                roleIds: [
                    { required: true, message: '请选择角色', trigger: 'blur' },
                ]
            }
        }
    },
    mounted(){
        this.getDropList()
    },
    methods:{
        getDropList(){
            // 部门列表
            listAdminDeptDTO().then(res=>{
                let resData = res.data.data
                let newData = [];
                resData.forEach(e => {
                    newData.push({
                        value:e.id,
                        label:e.deptName
                    })
                });
                this.dtoOptions = newData
            })
            //角色列表
            listAdminRoleDTO().then(res=>{
                let resData = res.data.data
                let newData = [];
                resData.forEach(e => {
                    newData.push({
                        value:e.id,
                        label:e.roleName
                    })
                });
                this.roleOptions = newData
            })
        },
        submitFn(e){
            let tf = this.form
            this.$refs[e].validate((valid) => {
                if (valid) {
                    for(var n in tf){
                        if(tf.hasOwnProperty(n)){
                            if(tf[n].length){
                                continue;
                            }
                            if(+tf[n]!==undefined){
                                tf[n] += "";
                            }
                        }
                    }
                    let datas = this.form
                    saveAdminUser(datas).then(res=>{
                        console.log(res)
                        if(!res.data.code){
                            this.$message({
                                showClose: true,
                                message: '添加成功',
                                type: 'success'
                            });
                            this.$router.push('/adminManageIndex')
                        }else{
                            this.$message({
                                showClose: true,
                                message: res.data.msg,
                                type: 'warning'
                            });
                        }
                    })
                    .catch(error =>{
                        this.$message.error(error);
                    })
                }else{
                     this.$message({
                        message: '有必填项没填，不能提交咯',
                        type: 'warning'
                    });
                    return false;
                }
            });
        }
    }
}
</script>
<style scoped>
.app-container{padding: 1px!important}
</style>
